<template>
  <el-card class="box-card">
    <!-- 卡片顶部添加按钮 -->
    <el-button type="primary" size="default" @click="" icon="plus">添加品牌</el-button>
    <!-- 表格组件：用于展示已有的平台数据 -->
    <el-table style="margin: 10px 0px;" boder :data="trademarkArr">
      <el-table-column label="序号" width="80px" align="center"></el-table-column>
      <el-table-column label="品牌名称"></el-table-column>
      <el-table-column label="品牌LOGO"></el-table-column>
      <el-table-column label="品牌操作"></el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3, 5, 7, 9]" :background="true"
      layout=" prev, pager, next, jumper,->, sizes , total" :total="total" />
  </el-card>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { reqHasTradeMark } from '@/api/product/trademark'
// 当前页码
let pageNo = ref<number>(1)
// 每一页站是多少条数据
let limit = ref<number>(3)
// 存储已有品牌数据总数
let total = ref<number>(0)
// 存储已有品牌数组
let trademarkArr = ref([])
// 获取已有品牌的接口封装为函数：在任何情况下获取数据，调用函数即可
const getHasTradeMark = async () => {
  let result = await reqHasTradeMark(pageNo.value, limit.value)
  if (result == 200) {
    // 存储已有品牌个数
    total.value = result.data.total
    trademarkArr.value = result.data.records
    console.log(result);
    
  }
}
// 组件挂在完毕钩子---发一次请求，获取第一页、一页三个品牌
onMounted(() => {
  getHasTradeMark()
})

</script>

<style scoped></style>